<template>
  <div class="dashboard-container">
    <div v-red class="dashboard-text">name: {{ name }}</div>
    <!--
      1. form组件 model 表单关联的数据对象
      2. form组件 rules属性 校验规则
      3. form-item组件 输入框所在的item项必须有prop属性
      4. el-input组件 表单元素(输入框) 绑定v-model指令
     -->
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>
    </el-form>
    <hr>
    <br>
    <br>
    <br>
    <br>
    <!-- 在组件上绑定click事件的时候, 如果事件绑定不成功, 说明当前组件内部并没有发布这样的事件
       需要在绑定事件的时候加.native修饰符,将这个事件注册到组件内部

       以后在使用组件库的时候,注意: 如果绑定事件没有效果,记得加 .native修饰符
     -->
    <Son @click.native="logout" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Son from './Son.vue'

export default {
  name: 'Dashboard',
  components: { Son },
  data() {
    return {
      // 表单关联的数据对象
      ruleForm: {
        mobile: '',
        password: ''
      },
      // 表单项的校验规则
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          // pattern校验正则
          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的11位手机号', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
          { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    logout() {
      console.log('退出')
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
